<template lang="pug">
  .m-right
    m-time
    .cpu
      .title CPU使用量
      .main
        .content
          transition-group(:name="animateName" tag="div")
            .item(ref="cpu" v-show="currentIndex===0" :key="0") 000
            .item(ref="cpu1" v-show="currentIndex===1" :key="1") 111
          .prev.iconfont.icon-right-jiantou-copy(ref="prev")
          .next.iconfont.icon-right-jiantou-copy-copy(ref="next")
    .statis
      .title 费用统计
      .main
        .item
          .value 6300.00
            .unit 元
          .desc 天翼高清
        .item
          .value 5310.00
            .unit 元
          .desc 智能家居
        .item
          .value 320.00
            .unit 元
          .desc 网关
        .item
          .value 7695.00
            .unit 元
          .desc 公用支持类系统
        .money.iconfont.icon-money
    .dialingtest
      .title 拨测情况
      .main(ref="dialing")

</template>
<script>
import MTime from './time'
import echarts from 'echarts'
function initCpu () {
  const total = [5000, 3800, 3100, 5000]
  let option = {
    legend: {
      data: ['已使用', '分配量'],
      textStyle: {
        color: () => 'red'
      }
    },
    grid: {
      left: '25%',
      top: '15%',
      right: '12%',
      bottom: '10%'
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(77,95,147,0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(77,95,147,0.2)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['公用支持类系统', '网关', '智能家居', '天翼高清'],
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(77,95,147,0.2)'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '已使用',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        label: {
          normal: {
            show: true,
            position: [0, -13],
            color: '#ffb400'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                { offset: 0, color: '#fbb871' },
                { offset: 1, color: '#da6c01' }
              ]
            )
          }
        },
        data: [3080, 2890, 2000, 4100]
      },
      {
        name: '分配量',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        barGap: '-200%',
        label: {
          normal: {
            show: true,
            position: 'insideRight',
            color: '#00c5fe',
            offset: [0, -13],
            formatter: ({ dataIndex }) => {
              return total[dataIndex]
            }
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                { offset: 0, color: '#0167e8' },
                { offset: 1, color: '#00c6ff' }
              ]
            )
          }
        },
        data: [1920, 910, 1100, 900]
      }
    ]
  }

  let el = this.$refs.cpu
  echarts.init(el).setOption(option)
}
function initDialing () {
  const bgs = ['137,108,169,0.22', '242,153,125,0.22', '236,111,140,0.22', '246,213,95,0.22', '158,210,175,0.22',
    '53,186,218,0.22', '55,144,206,0.22', '53,83,164,0.22', '69,43,141,0.22', '99,184,183,0.22']

  let percent = {}
  for (let i in bgs) {
    const bg = {
      fontSize: 12,
      height: 18,
      width: 40,
      align: 'center',
      lineHeight: 18
    }
    percent[`a${i}`] = Object.assign(bg, { backgroundColor: `rgba(${bgs[i]})` })
  }

  const option = {
    color: ['#896ca9', '#f2997d', '#ec6f8c', '#f6d55f', '#9ed2af', '#35bada', '#3790ce', '#3553a4', '#452b8d', '#63b8b7'],
    series: [
      {
        name: '面积模式',
        type: 'pie',
        radius: [30, 110],
        center: ['50%', '50%'],
        roseType: 'area',
        data: [
          { value: 10, name: '项目1' },
          { value: 5, name: '项目2' },
          { value: 15, name: '项目3' },
          { value: 25, name: '项目4' },
          { value: 20, name: '项目5' },
          { value: 35, name: '项目6' },
          { value: 30, name: '项目7' },
          { value: 40, name: '项目8' },
          { value: 40, name: '项目9' },
          { value: 40, name: '项目10' }
        ],
        label: {
          normal: {
            formatter: ({ dataIndex, name, percent }) => {
              percent = Math.floor(percent)
              let key = `a${dataIndex}`
              return [`{${key}|${percent}%}`, `{name|${name}}`].join('\n')
            },
            rich: {
              name: {
                fontSize: 12,
                lineHeight: 20
              },
              ...percent
            }
          }
        },
        labelLine: {
          // show: false
        }
      }
    ]
  }
  let el = this.$refs.dialing
  echarts.init(el).setOption(option)
}
function mounted () {
  this.initCpu()
  this.initDialing()
}
const methods = {
  initCpu,
  initDialing
}
const out = {
  animateName: 'left',
  currentIndex: 0
}
export default {
  components: { MTime },
  data () {
    return out
  },
  mounted,
  methods
}
</script>

<style lang="stylus" scoped>
.m-right
  width 450px
  margin-right 26px
  .title
    height 16px
    line-height @height
    font-size 16px
    color #2ca7c7
    font-weight bold
    margin-bottom 25px
    letter-spacing 1px
    background-image url('img/line.png')
    background-repeat no-repeat
    background-position right bottom
  .cpu
    margin-top 31px
    .main
      .content
        overflow hidden
        height 245px
        position relative
        .item
          width 100%
          height 100%
          position absolute
          top 0
          left 0
          font-size 40px
        >.prev
        >.next
          position absolute
          width 34px
          height 34px
          font-size 34px
          z-index 99
          cursor pointer
          color #30d7e0
          &.prev
            top 50%
            left 6px
            margin-top - (@height/2)
            background-repeat no-repeat
            background-position center center
          &.next
            right 6px
            top 50%
            margin-top - (@height/2)
            background-repeat no-repeat
            background-position center center
  .statis
    margin-top 38px
    .main
      position relative
      margin-top 30px
      display flex
      flex-wrap wrap
      padding-left 19px
      .item
        flex 0 0 189px
        width 189px
        height 109px
        border-radius: 20px
        background-color  rgba(37,202,244,.16)
        // opacity 0.36
        margin-bottom 13px
        &:nth-child(2n)
          margin-left 11px
          .value
          .desc
            margin-left 49px
        .value
          font-size 20px
          color #39d6fe
          font-weight bold
          display flex
          align-items flex-end
          margin-top 32px
          margin-left 27px
          .unit
            font-size 14px
            margin-left 8px
        .desc
          margin-top 16px
          line-height 1
          color #39d6fe
          margin-left 27px
      .money
        position absolute
        top 50%
        left 208px
        width 125px
        height 125px
        margin-top - (@height/2) px
        margin-left - (@height/2) px
        font-size 60px
        line-height 125px
        text-align center
        background #0b1a29
        color #ffffff
        border-radius 50%
  .dialingtest
    margin-top 38px
    .main
      height 280px

</style>
